<!--年周，没有ID-->
<template>
  <el-date-picker
    v-model="mydate"
    v-bind="$attrs"
    type="week"
    :name="'c' + formItemMeta.columnId"
    :format="format"
    :clearable="clearable"
    @change="myChange"
  >
  </el-date-picker>
</template>

<script lang="ts">
  import { ref, watch, defineComponent } from 'vue'
  // import { ElDatePicker } from 'element-plus'
  // 引入组件需要的属性 引入表单子控件的管理类
  import { itemProps, itemController } from '../map'

import dayjs from 'dayjs'

import isoWeeksInYear from 'dayjs/plugin/isoWeeksInYear'
import isLeapYear from 'dayjs/plugin/isLeapYear' // dependent on isLeapYear plugin
dayjs.extend(isoWeeksInYear)
dayjs.extend(isLeapYear)

import isoWeek from 'dayjs/plugin/isoWeek'
dayjs.extend(isoWeek)
 
/**
 * 日期管理类
 * * 功能：
 * ** 按照类型提交数据，不是date()
 * ** 监听属性，设置value
 * * 参数：
 * ** value： control类的value
 * ** mySubmit： control类的mySubmit，直接就提交了
 * ** controlType：属性里的控件类型
 * * 返回
 * ** 绑定控件的 mydate
 * ** change 事件的 myChange  value instanceof Date
 */
const dateManage = (value, props) => {
  // 日期控件用的v-model，便于做类型转换
  const mydate = ref<string | Date>('')
  value.value = '' // dayjs(mydate.value).format(props.returnFormat)

  // let myweek = ref(0)
  // myweek.value = dayjs('2022-01-03').isoWeek() // isoWeeksInYear
  // 周几 和 年月日的对应
  const dic = {
    1: (year: number) => new Date(year + '-01-01'),
    2: (year: number) => new Date((year - 1) + '-12-31'),
    3: (year: number) => new Date((year - 1) + '-12-30'),
    4: (year: number) => new Date((year - 1) + '-12-29'),
    5: (year: number) => new Date(year + '-01-04'),
    6: (year: number) => new Date(year + '-01-03'),
    0: (year: number) => new Date(year + '-01-02')

  }
  // 把 2021xx 的形式变成 date 类型
  const weekToDate = (week) => {
    if (week === '' || week === 0) {
      return new Date()
    }
    // 拆分week
    const year = week.substr(0, 4)
    const w = week.substr(week.length - 2, 2)
    // console.log (year, w)

    // 计算一月一号是周几
    const dayOfWeek = new Date(year + '-01-01').getDay()
    // 计算第一周的第一天是几号。
    const firstDay = dic[dayOfWeek](parseInt(year))

    // 按照周数计算日期
    return dayjs(firstDay).add(7 * (w - 1), 'day').toDate()
  }

  // 监听属性，设置给 mydate
  watch(() => value.value, (v1, v2) => {
    // 把周数转换成日期
    // mydate.value = v1
    if (v1 === '') {
      mydate.value = ''
    } else {
      mydate.value = weekToDate(v1)
    }
  }, {immediate: true})

  // 向父组件提交数据。
  const myChange = (val) => {
    if (val === null) {
      // 清空的情况
      value.value = ''
    } else {
      // 获取本年里第几周 日历取的是周日，但是从周一开始 .add(1, 'day')
      const wk: string = dayjs(val).add(1, 'day').isoWeek().toString()

      const year = val.getFullYear()
      const re = year.toString() + ' ' + wk.padStart(2, '0')
      value.value = re
      // 强制修改 显示的 年周
      document.getElementsByName('c' + props.formItemMeta.columnId)[0].value = re

    }
  }

  return {
    mydate,
    myChange
  }
}

export default defineComponent({
  name: 'nf-el-from-item-week',
  inheritAttrs: false,
  components: {
    // ElDatePicker
  },
  props: {
    ...itemProps, // 基础属性
    format: { // 返回数据的格式化。date：日期类型 showFormat
      type: String,
      default: 'YYYY-ww'
    },
    valueFormat: { // 返回数据的格式化。date：日期类型 returnFormat
      type: String,
      default: 'YYYY-ww'
    },
    colName: String, // 变更字段名称
    modelValue: [String, Date]
  },
  emits: ['update:modelValue'],
  setup (props, context) {
    const { value } = itemController(props, context.emit)
    // console.log('props-date', props)
    // const value = ref('')
    return {
      ...dateManage(value, props)
    }
  }
})
</script>
